<template>
  <dv-full-screen-container class="bg c-fff">
    <dv-loading v-if="loading">{{ text }}</dv-loading>
    <div v-else class="warp">
      <top :info="info" />
      <div class="main flex">
        <left :info="info" :config="config" @onChange="getConfig" />
        <center :info="info" :config="config" @onChange="getConfig" />
        <right :info="info" :config="config" @onChange="getConfig" />
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import Top from '@/views/agriculture/components/Top'
import Left from '@/views/agriculture/components/Left'
import Right from '@/views/agriculture/components/Right'
import Center from '@/views/agriculture/components/Center'
import agricultureApi from '@/api/agriculture'

export default {
  components: {
    Top,
    Left,
    Center,
    Right
  },
  name: 'index',
  data() {
    return {
      text: 'Loading...',
      loading: true,
      info: [],
      config: {}
    }
  },
  mounted() {
    this.getData()
    this.getConfig()
  },
  methods: {
    getData() {
      agricultureApi.agricultureList().then((res) => {
        if (res.rows.length > 0) {
          if (!res.rows[0].data.val) {
            agricultureApi.getData().then((res1) => {
              this.info = res1.data
              this.loading = false
            })
          } else {
            this.info = res.rows[0].data
            this.loading = false
          }
        } else {
          this.text = '暂无数据'
        }
      })
    },
    getConfig() {
      agricultureApi.personalVisualizationConfig({ visualizationType: 100 }).then((res) => {
        this.config = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.bg {
  background: #07092a;

  .warp {
    width: 100%;

    .main {
      width: 23.8rem;
      margin-left: 0.1rem;
      margin-right: 0.1rem;
      height: calc(100% - 1.2675rem);
    }
  }
}
</style>